<template>
    <div class="answer">
        <el-card shadow="hover" class="answer-main">
            <div slot="header">
                <div class="title">
                    <span>AcWing 1. 千里之行始于足下梦开始的地方——A+B problem C++史上最详解，氵题一道的代码）</span>
                </div>
                <div class="user">
                    <div class="user-l">
                        <el-avatar src="http://www.lijunxi.site:1234/static/avatar/123456/qq.jpg.png"
                            :size="35"></el-avatar>
                        <div class="nickname">
                            <span>Jixer</span>
                            <div class="more">
                                <div>
                                    <span><i class="el-icon-view"></i> 11</span>
                                </div>
                                <div>
                                    <span><i class="el-icon-date"></i>2021-12-31 12:30</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <el-button size="mini">点赞</el-button>
                        <el-button size="mini">收藏</el-button>
                    </div>
                </div>
            </div>
            <div>
                <v-md-editor v-model="content" mode="preview"></v-md-editor>
            </div>
        </el-card>

        <FunComment class="comments-main"></FunComment>
    </div>
</template>

<script>
import md from '../.../../../../../README.md'
import FunComment from '@/components/fun-comment'
export default {
    name: 'problem-answer',
    components: {
        FunComment
    },
    data() {
        return {
            content: md
        }
    },
}
</script>

<style scoped>
.answer-main {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 20px;
}

.comments-main {
    width: 80%;
    margin: 0 auto;
}

.title {
    font-size: 23px;
    font-family: "HarmonyOS_Sans_Regular";
}

.user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
}

.user-l {
    display: flex;
    align-items: center;
    height: 50px;
}

.nickname {
    padding: 0 15px;
    color: #18191b;
}

.more {
    font-size: 13px;
    display: flex;
    align-items: center;
    color: #1a1a1abf;
}

.more div {
    margin-right: 20px;
}

.more div i {
    margin-right: 5px;
}
</style>